<!--
 * @Descripttion:
 * @version: 1.0
 * @Author: Teemor
 * @Date: 2024-03-15 10:40:28
-->
<template>
  <view class="topBox" :style="{ paddingTop: safeAreaInsets.top + 'px' }">
    <uv-navbar :leftText="title" fixed @leftClick="back" leftIconColor="#fff" :bgColor="bgColor" />
    <view style="height: 88rpx"></view>
    <view
      class="flex pl-[30rpx] pr-[30rpx] mt-3 flex-items-center grid-justify-between"
      :style="{ top: safeAreaInsets.top + 44 + 'px', background: bgColor }"
    >
      <view class="flex">
        <gc-statusIcon :status="status" />
        <view class="ml-4 color-[#fff]">
          <view class="font-size-5">{{ name }}</view>
          <view class="font-size-3">{{ tips }} </view>
        </view>
      </view>
      <view class="statusText">{{ status === 5 ? '设备详情' : '在线' }}</view>
    </view>
    <view class="bg">
      <uv-image
        width="100%"
        height="100%"
        mode="aspectFill"
        duration="450"
        :fade="true"
        :src="bg"
      ></uv-image>
    </view>
  </view>
</template>

<script setup>
import bg from '@/static/images/icon/bg.png'
const { safeAreaInsets, windowHeight } = uni.getSystemInfoSync()
const bgColor = ref('rgba(154,202,252,0)')
onPageScroll(({ scrollTop }) => {
  bgColor.value = scrollTop > 10 ? '#226cff' : 'rgba(154,202,252,0)'
})
const props = defineProps({
  title: {
    type: Number,
    default: '',
  },
  size: {
    type: Number,
    default: 30,
  },
  name: {
    type: String,
    default: 'XG2409001',
  },
  tips: {
    type: String,
    default: '运行中',
  },
  status: {
    type: Number,
    default: 1,
  },
})
const { title } = toRefs(props)

const back = () => {
  uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.topBox {
  position: relative;
  padding-bottom: 84rpx;
  background: #226cff;
}

.bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.statusText {
  width: 110rpx;
  padding: 10rpx 30rpx;
  font-size: 26rpx;
  color: #fff;
  text-align: center;
  background: #19c58c;
  border-radius: 40rpx;
}
</style>
